/*
 * @Author: xiaosihan 
 * @Date: 2024-01-07 05:14:43 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-03 11:35:38
 */
import { Button, Input, Table } from 'antd';
import { cloneDeep } from 'lodash';
import { useState } from 'react';

interface Iprops {
    editor?: boolean;
    columns: Array<{ [key: string]: any }>,
    dataSource: Array<{ [key: string]: any }>,
    onChang?: (columns: Array<{ [key: string]: any }>, dataSource: Array<{ [key: string]: any }>) => void;
}

// 尺码信息
export default function EditorTable(props: Iprops) {

    const [columns, setColumns] = useState(props.columns);
    const [dataSource, setDataSource] = useState(props.dataSource);

    // const dataSource = [
    //     {
    //         0: "s",
    //         size: "s",
    //         a: "55cm",
    //         b: "56cm",
    //         c: "70cm",
    //         d: "20.5cm",
    //     },
    //     {
    //         0: "M",
    //         size: "M",
    //         a: "57cm",
    //         b: "58cm",
    //         c: "72cm",
    //         d: "21.5cm",
    //     },
    //     {
    //         0: "L",
    //         size: "L",
    //         a: "59cm",
    //         b: "60cm",
    //         c: "74cm",
    //         d: "22.5cm",
    //     },
    //     {
    //         0: "XL",
    //         size: "XL",
    //         a: "61cm",
    //         b: "62cm",
    //         c: "76cm",
    //         d: "23.5cm",
    //     },
    //     {
    //         0: "XXL",
    //         size: "XXL",
    //         a: "63cm",
    //         b: "64cm",
    //         c: "78cm",
    //         d: "24.5cm",
    //     },

    // ];

    // const columns = [
    //     {
    //         title: '尺码',
    //         dataIndex: '0',
    //         key: '0',
    //     },
    //     {
    //         title: '肩宽(cm)',
    //         dataIndex: 'a',
    //         key: 'a',
    //     },
    //     {
    //         title: '1/2胸围(cm)',
    //         dataIndex: 'b',
    //         key: 'b',
    //     },
    //     {
    //         title: '衣长(cm)',
    //         dataIndex: 'c',
    //         key: 'c',
    //     },
    //     {
    //         title: '袖长(cm)',
    //         dataIndex: 'd',
    //         key: 'd',
    //     },
    // ];

    const newColumns: Array<any> = cloneDeep(columns).map((c, i) => {
        if (props.editor) {
            const { title } = c;
            //@ts-ignore
            c.title = () => {
                return (
                    <Input
                        style={{
                            fontWeight: "bold"
                        }}
                        defaultValue={title}
                        onBlur={e => {
                            const newColumns = cloneDeep(columns);
                            newColumns[i].title = e.target.value;
                            if (props.onChang) {
                                props.onChang(newColumns, dataSource);
                            }
                            setColumns(newColumns);
                        }}
                    />
                );
            }
            //@ts-ignore
            c.render = (text, record, index) => {                
                return (
                    <Input
                        style={{
                            fontWeight: "bold"
                        }}
                        defaultValue={text}
                        onBlur={e => {
                            const newDataSource = cloneDeep(dataSource);
                            newDataSource[index][i] = e.target.value;
                            if (props.onChang) {
                                props.onChang(columns, newDataSource);
                            }
                            setDataSource(newDataSource);
                        }}
                    />
                );
            }
        }

        return c;
    });

    // 添加一列
    const addRow = () => {
        let i = columns.length;
        const newColumns = cloneDeep(columns);
        newColumns.push({
            title: "",
            dataIndex: String(i),
            key: String(i)
        });

        dataSource.map(d => {
            for (let key in d) {
                if (Number(key) > i) {
                    delete d[key];
                }
            }
        });

        if (props.onChang) {
            props.onChang(newColumns, dataSource);
        }
        setColumns(newColumns);
    }

    //删除一列
    const delRow = () => {
        const newColumns: any = cloneDeep(columns);
        newColumns.pop();
        if (props.onChang) {
            props.onChang(newColumns, dataSource);
        }
        setColumns(newColumns);
    }

    const addCol = () => {
        const i = dataSource.length;
        const newDataSource = cloneDeep(dataSource);
        newDataSource.push({ key: String(i) });
        if (props.onChang) {
            props.onChang(columns, newDataSource);
        }
        setDataSource(newDataSource);
    }

    const delCol = () => {
        const newDataSource = cloneDeep(dataSource);
        newDataSource.pop();
        if (props.onChang) {
            props.onChang(columns, newDataSource);
        }
        setDataSource(newDataSource);
    }

    return (
        <div>
            {
                props.editor && < div >
                    <Button type="primary" onClick={() => addRow()} >添加一列</Button>
                    <Button type="primary" onClick={() => delRow()} >删除一列</Button>
                    <Button type="primary" onClick={() => addCol()} >添加一行</Button>
                    <Button type="primary" onClick={() => delCol()} >删除一行</Button>
                </div>
            }
            <Table
                style={{ minHeight: 200 }}
                size="small"
                bordered={true}
                columns={newColumns}
                dataSource={dataSource}
                pagination={false}
            />
        </div >
    )
}



